import React from 'react';
import {Link} from "react-router";
import PropTypes from 'prop-types';
import axios from 'axios';
import styles from '../css/Project.css';
import stylesRegist from '../css/Regist.css';


class regist extends React.Component {

    constructor (props, context) {
        super(props, context);
        this.state = {
            seconds: 0,
            dlgTipTxt: '免费获取验证码',
            form: {
                userPhone: {
                    valid: false,
                    value: '',
                    error: ''
                },
                password: {
                    valid: false,
                    value: 0,
                    error: ''
                },
                password_two: {
                    valid: false,
                    value: 0,
                    error: ''
                },
                code: {
                    valid: false,
                    value: 0,
                    error: ''
                },
                tui_phone: {
                    valid: false,
                    value: 0,
                    error: ''
                },
                relaName:{
                    valid: false,
                    value: 0,
                    error: ''
                }
            }
        };
    }
    _sendVerifyCode(value){
        console.log(value)
        if (this.state.seconds >0)
            return;
     if (value.length==0){
            alert('请输入手机号');
            return;
        } else if(value.length!=11){
            alert('你输入的手机号有误');
            return;
        }
        axios.get('http://guoxue.boyueguoxue.cn/User/sendSmsBeforeLogin.do?tel='+value+'&type=1&isChannelUser=1')
            .then(response => {
                let code=response.data.code;
                let message=response.data.message;
                console.log('code'+code);
                console.log(response.data);
                if(code==200){
                    this.sendEmail();
                    alert('验证码已发送请注意查收');
                }else {
                    alert(message);
                    return;
                }
            })
            .catch(function (error) {
                alert(error)
            })
    }

    handleValueChange (field, value, type = 'string') {


        const {form} = this.state;

        const newFieldObj = {value, valid: true, error: ''};

        switch (field) {
            case 'userPhone': {
                if (value.length != 11) {
                    newFieldObj.error = '您输入的手机号错误';
                    newFieldObj.valid = false;
                } else if (value.length === 0) {
                    newFieldObj.error = '手机号码不能为空';
                    newFieldObj.valid = false;
                }
                break;
            }
            case 'password': {
                if (value.length>16||value.length<6) {
                    newFieldObj.error = '请输入6~16位数字或英文字母密码';
                    newFieldObj.valid = false;
                }else if (value.length === 0) {
                    newFieldObj.error = '密码不能为空';
                    newFieldObj.valid = false;
                }
                break;
            }
            case 'password_two': {
                if (value.length>16||value.length<6) {
                    newFieldObj.error = '请输入6~16位数字或英文字母密码';
                    newFieldObj.valid = false;
                }else if (value.length === 0) {
                    newFieldObj.error = '密码不能为空';
                    newFieldObj.valid = false;
                }
                break;
            }
            case 'code': {
                if (value.length>46) {
                    newFieldObj.error = '请输入数字验证码';
                    newFieldObj.valid = false;
                }else if (value.length === 0) {
                    newFieldObj.error = '验证码不能为空';
                    newFieldObj.valid = false;
                }
                break;
            }

            case 'tui_phone': {
                if (value.length != 11) {
                    newFieldObj.error = '您输入的手机号错误';
                    newFieldObj.valid = false;
                } else if (value.length == 0) {
                    newFieldObj.error = '手机号码不能为空';
                    newFieldObj.valid = false;
                }
                break;
            }
            case 'relaName':{
                if(value.length==0){
                    newFieldObj.error='真实姓名不能为空';
                    newFieldObj.valid=false;
                }
            }
        }

        this.setState({
            form: {
                ...form,
                [field]: newFieldObj
            }
        });
    }
    sendEmail = () => {
        this.setState({seconds: 59});
        let siv = setInterval(() => {
            this.setState((preState) => ({
                seconds: preState.seconds - 1,
                dlgTipTxt:  preState.seconds > 1? `(${preState.seconds - 1})`:'免费获取验证码',
            }), () => {
                if (this.state.seconds == 0) {
                    clearInterval(siv);
                }
            });
        }, 1000)
    }
    handleSubmit (e) {
        e.preventDefault();
        const {form: {userPhone, password,password_two,code,tui_phone,relaName}} = this.state;

        if (!userPhone.valid ) {
            alert(userPhone.error);
            return;
        }else if(!password.valid){
            alert(password.error);
            return;
        }else if(!password_two.valid){
            alert(password_two.error);
            return;
        }else if(!code.valid){
            alert(code.error);
            return;
        }else if(!tui_phone.valid){
            alert(tui_phone.error);
            return;
        }else if (!relaName.valid){
            alert(relaName.error);
            return;
        }


        axios.get('http://guoxue.boyueguoxue.cn/User/createUserByTel.do?tel='+userPhone.value+'&pass='
            +password.value+'&messageCode='+code.value+'&type=1&channelHigherUpTel='+tui_phone.value+'&channelRealName='+relaName.value)
            .then(response => {
                let code=response.data.code;
                let message=response.data.message;
                console.log('code'+code);
                console.log(response.data);
                if(code==200){
                    this.context.router.push('/');
                    alert('账号创建成功');
                }else {
                    alert(message);
                    return;
                }
            })
            .catch(function (error) {
                alert(error);
            })
    }


    render () {
        const {form: {userPhone, password,password_two,code,tui_phone,relaName}} = this.state;
        return (
            <div>
                <div id="body" className={styles["Project-layoutHead"]}></div>
                    <div id="divBody" className={styles["Project-layoutBody"]}>
                    <div id="bodyDivCenter" className={stylesRegist["Register-Layout-center"]}>
                    <form  onSubmit={(e) => this.handleSubmit(e)}>
                        <input
                            className={stylesRegist["Register-inputDefault"]}
                            type="relaName"
                            maxLength={16}
                            value={relaName.value || ''}
                            placeholder="请输入真实姓名"
                            onChange={(e) => this.handleValueChange('relaName', e.target.value)}/>

                        <br/>
                        <input
                            className={stylesRegist["Register-inputDefault"]}
                            type="text"
                            value={userPhone.value}
                            placeholder="请输入您的手机号"
                            onChange={(e) => this.handleValueChange('userPhone', e.target.value)}/>
                        <br/>

                        <input
                            className={stylesRegist["Register-inputDefault"]}
                            type="password"
                            value={password.value || ''}
                            placeholder="请输入密码"
                            onChange={(e) => this.handleValueChange('password', e.target.value, 'number')}/>

                        <br/>
                        <input
                            className={stylesRegist["Register-inputDefault"]}
                            type="password"
                            value={password_two.value || ''}
                            placeholder="请再次输入密码"
                            onChange={(e) => this.handleValueChange('password_two', e.target.value, 'number')}
                        />
                        <br/>
                        <input
                            className={stylesRegist["Register-inputDefault"]}
                            type="number"
                            value={tui_phone.value || ''}
                            placeholder="请输入推荐人手机号"
                            onChange={(e) => this.handleValueChange('tui_phone', e.target.value, 'number')}
                        />
                        <br/>
                        <div className={stylesRegist["Forget-div"]}>
                        <input
                            className={stylesRegist["Register-inputDefault"]}
                            type="number"
                            value={code.value || ''}
                            placeholder="请输入验证码"
                            onChange={(e) => this.handleValueChange('code', e.target.value, 'number')}
                        />
                        <input type="button" className={stylesRegist["Regist-buttonLeft"]} id="btn" value={this.state.dlgTipTxt}  onClick={() => this._sendVerifyCode(userPhone.value)} />
                        </div>
                        <br/>
                            <div className={stylesRegist["Regist-button-centerDiv"]}>
                                <input className={stylesRegist["Forget-button"]} type="submit" value="确认注册"/>
                            </div>
                    </form>
                    </div>
                    </div>
            </div>
        );
    }

}
regist.contextTypes = {
    router: PropTypes.object.isRequired
};
export default regist;